<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/base/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>${systemOption.systemTitle}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${ctx}/css/font-awesome.min.css">
<link rel="stylesheet" href="${ctx}/css/jquery.orgchart.css">
<link rel="stylesheet" href="${ctx}/css/department-index-style.css">

<script type="text/javascript"
	src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<!-- the following reference is specific for IE -->
<script type="text/javascript" src="${ctx}/js/es6-promise.auto.min.js"></script>
<script type="text/javascript" src="${ctx}/js/html2canvas.min.js"></script>
<script src="${ctx}/js/jspdf.debug.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.orgchart.js"></script>
<script type="text/javascript">
	$(function() {
		/* $.ajax({
			url : "${ctx}/json/showDepartment.action",
			dataType : "json",
			success : function(data) {
				datascource = data;
				orgchart(data);
			}
		}); */
		$('#chart-container').orgchart({
			'data' : '${ctx}/json/showDepartment.action',
			'nodeContent' : 'text',
			'nodeTitle' : 'text',
			'pan': true,
      		'zoom': true,
			'exportButton' : true,
			'exportFilename' : '企业组织架构图',
			'createNode': function($node, data) {
		        $node.on('click', function() {
		        window.location.href = '${ctx}/business/deptuser.action?did='+data.id;
		        });
     		 }
		});
		
	});

</script>
</head>

<body>
	<h1 style="text-align: center;">企业组织架构图</h1>
	<div id="chart-container" style="height: 600px;"></div>
</body>
</html>
